<!--头部公共部分-->
{include file="common/header" /}
<div style="padding:15px;">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">校区名称：</label>
                <label class="layui-form-label">{$campuslist.campus_name}</label>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">日期范围：</label>
                <div class="layui-input-inline">
                    <input type="text" name="create_date_rang" lay-verify="required" id="create_date" autocomplete="off"
                           placeholder="上课日期范围" class="layui-input">
                </div>
            </div>

        </div>

        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">班级名称：</label>
                <div class="layui-input-inline">
                    <input type="text" name="class_grades_name" lay-verify="required"  autocomplete="off"
                           placeholder="班级名称" class="layui-input">
                </div>
            </div>


            <div class="layui-inline" >
                <a class="layui-btn" id="search">
                    <i class="layui-icon layui-icon-search"></i>筛选</a>
                <a class="layui-btn layui-btn-danger" id="clear">
                    <i class="layui-icon"></i>重置</a>

            </div>

        </div>

        <table class="layui-table" id="datalist" lay-filter="Event" ></table>
        <div class="layui-form-item">
            <div class="layui-inline">
                <script type="text/html" id="name">
                    <a lay-event="see_info" class="layui-table-link">{{ d.class_grades_name }}</a>
                </script>
                <script type="text/html" id="barTable">
                    <a class="layui-btn layui-btn-xs layui-btn-warm" id="follow_class_id" lay-event="follow_class">跟班</a>
                </script>
            </div>
        </div>


        <div class="layui-form-item">
            <fieldset class="layui-elem-field " style=" border-color: #00b7ee;border-width: 3px;">
                <legend style="font-size: 18px;color: #00b7ee">学员列表</legend>
                <table class="layui-table" style="width: 795px;margin-left: 5px;margin-right: 5px;" id="showTb">
                    <thead>
                <script>
                    var student_name_arr = eval('{$student_name_arr}');//学生列表
                    console.log(student_name_arr)
                    for(var i = 0; i < student_name_arr.length;){
                        document.write('<tr>');
                        for(var j = 0; j  < 4; j ++){
                            if((i+j) < student_name_arr.length){
                                document.write('<td ><span style="color: #1E9FFF;">'+student_name_arr[i+j]+'</span></td>');
                            }else {
                                document.write('<td ><span style="color: #1E9FFF;">---</span></td>');
                            }
                        }
                        document.write('</tr>');
                        i = i+4;
                    }

                </script>
                    </thead>
                </table>
            </fieldset>

        </div>



        <div class="layui-form-item" style="float: right">
            <div class="layui-input-block">
            <!--    <input class="layui-btn layui-btn-normal" lay-submit lay-filter="form" value="立即提交" readonly> -->
                <a class="layui-btn  layui-btn-primary"  id="back">返回</a>
            </div>
        </div>




    </form>
</div>
<!--底部公共部分-->
{include file="common/footer" /}

<script>

    var course_id = '{$course_id}'; //课程ID
    var ids = '{$ids}'; //补课对应的id，用逗号隔开
    var class_subject_id = '{$class_subject_id}'; //班级id,用逗号隔开
    layui.use(['table', 'jquery', 'form','element', 'layer', 'laydate'], function () {
        let $ = layui.jquery
            , layer = layui.layer
            , table = layui.table
            , element = layui.element
            , laydate = layui.laydate
            , form = layui.form;

        let campus_id = "{$campus_id}";
        var loading = layer.load();
        //方法级渲染
        var field_init = {};
        field_init.course_id =  course_id;
        field_init.status = 0; //未上课
        field_init.campus_id = campus_id; //校区ID
        field_init.follow_class_manage_id = class_subject_id; //班级id
        var tableIns = table.render({
            elem: '#datalist'
            , url: '{:url("Arranging/lists")}?campus_id='+campus_id
            , method: 'POST'
            , loading: true
            , where: field_init
            , parseData: function (res) { //res 即为原始返回的数据
                if (res.code === 1) {
                    res.code = 0;
                } else {
                    res.code = -1;
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
            cols: [[
                {field: 'id', title: 'ID', width: 100, align: 'center'
                },{field: 'class_grades_name', title: '班级名称', width:300, align: 'center',templet: '#name'
                }, {field: 'class_date', title: '开课日期', width: 110, align: 'center'
                }, {field: 'campus_name', title: '归属校区', width: 100, align: 'center'
                }, {field: 'class_room', title: '教室', width: 100, align: 'center'
                }, {field: 'weekday', title: '星期', width: 100, align: 'center'
                }, {field: 'course_name', title: '课程名称', width: 300, align: 'center'
                }, {field: 'teacher', title: '上课老师', width: 100, align: 'center'
                }, {field: 'headmaster', title: '班主任', width: 100, align: 'center'
                }, {field: 'assistant', title: '助教', width: 100, align: 'center'
                }, {field: 'class_subject_start', title: '开课时间', width: 100, align: 'center'
                }, {field: 'class_subject_end', title: '下课时间', width: 100, align: 'center'
                }, {field: 'class_length', title: '上课时长', width: 100, align: 'center'
                }, {field: 'status_text', title: '是否上课?', width: 100, align: 'center'
                }, {fixed: 'right', title: '操作', width: 80, align: 'center', toolbar: '#barTable'}
            ]]
            , height: 'full-200'
            , page: true
            , done: function () {
                $("[data-field='id']").css('display','none');
                layer.close(loading);
            }
        });

        //监听工具条
        table.on('tool(Event)', function (obj) {
            var data = obj.data; //获得当前行数据
            console.log(data)
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent === 'follow_class') { //查看
                layer.confirm('确定【'+data.class_date+'】跟随此班级补课吗?', function (index) {
                            //插入学生至班级
                    var field = {};
                    field.id = data.id;
                    field.campus_id = campus_id;
                    field.ids = ids;
                    $.ajax({
                        url: '/admin/remedial/follow_grade',
                        method: "post",
                        data: field,
                        beforeSend: function () {
                            isLoad = layer.load(0, {
                                shade: false
                            }); //0代表加载的风格，支持0-2
                        },
                        success: function (result) {
                            layer.msg(result.msg);
                            if (result.code === 1) {
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index)
                            }

                        },
                        complete: function () {
                            layer.close(isLoad)
                        },
                        error: function (error) {
                            console.log(error)
                        }
                    });
                    return false;
                });
            }
        });

        //限定可选日期
        laydate.render({
            elem: '#create_date'
            // ,max: day_date
            ,range: true
        });

        //开班日期
        laydate.render({
            elem: '#class_date_start',
            type: 'date',
         //   value:  getNowFormatDate(),

        });

        //开班日期
        laydate.render({
            elem: '#class_date_end',
            type: 'date',
          //  value:  getNowFormatDate(),

        });

        //返回
        $('#back').click(function () {

            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        });
        //监听提交
        form.on('submit(form)', function (data) {

            return false;
        });

        //搜索项
        $('#search').click(function () {
            var field = {};
            field.campus_id = $('select[name=campus_id] option:selected').val();
            field.class_grades_name = $('input[name=class_grades_name]').val();
            field.course_id =  course_id;
            field.follow_class_manage_id = class_subject_id;
            field.status = 0; //未上课
            var strs_date= new Array(); //定义一数组
            var create_date_rang = $('input[name=create_date_rang]').val();
            if(create_date_rang.length > 0){
                strs_date=create_date_rang.split("-"); //字符分割
                field.class_start_date = strs_date[0]+'-'+strs_date[1]+'-'+strs_date[2];
                field.class_end_date = strs_date[3]+'-'+strs_date[4]+'-'+strs_date[5];

            }

            tableIns.reload({
                where: field,
                method: 'POST',
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });

        });
        //清除
        $('#clear').click(function () {
            $('.layui-form-pane').find('.layui-input-inline').each(function (index, element) {
                $(element).find('input[type=text]').val('');
                $(element).find('select').val('');
            })
            tableIns.reload({
                where: {
                    'class_end_date': '',
                    'class_start_date': '',
                    'class_grades_name': '',
                    'course_id': course_id,
                    'follow_class_manage_id': class_subject_id,
                    'status': 0, //未上课
                    'campus_id': '',
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

    });




    //获取当前时间，格式YYYY-MM-DD
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }
</script>